(function () {
    var style = `
        .jwebui-table {
            font-size: 12px;
            color: #333;
            display: flex;
            flex-direction: column;
        }
        
        .jwebui-table .table-header {
            height: 30px;
        }
        .jwebui-table .table-header{
            height: 30px;
            background: #e1fdf6;
            color: #8c8c8c;
            line-height: 30px;
        }
        .jwebui-table .table-tr {
            display: flex;
        }
        .jwebui-table .table-body .table-tr:hover{
            background: #d5f9f1;
        }
        
        .jwebui-table .table-tr.selected,
        .jwebui-table .table-tr.selected:hover{
            background: #8af7de;
        }
        
        .jwebui-table .table-td {
            flex: 1;
            display: inline-block;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
            
        }
        
        .jwebui-table .table-td  {
            padding: 0px 5px;
            min-height: 30px;
            line-height: 30px;
        }
        
        .jwebui-table .table-body{
            flex: 1;
            overflow: auto;
        }

    `;

    var template = `
        <div class="jwebui-table" lay-filter="task_list" lay-size="sm" lay-skin="nob">
            <div class="table-header">
                <div class="table-tr">
                    <div v-for="col in columns" class="table-td" :style="col.style">
                        <slot :name="'#'+col.key" :data="col" >{{col.title}}</slot>
                    </div>
                </div>
            </div>
            <div class="table-body" >
                <hd-scroll>
                    <div :class="'table-tr ' + (equals(data,currSelectData)?'selected':'')" v-for="data in datas" @click="clickRow(data)" >
                        <div v-for="col in columns" class="table-td" :style="col.style">
                            <slot :name="col.key" :data="data" >{{data[col.key]}}</slot>
                        </div>
                    </div>
                </hd-scroll>
            </div>
        </div>
    `
    return {
        emits: ['clickrow'],
        data() {
            return {
                currSelectData: {},
            }
        },
        props: ["cols", "data"],
        updated: function () {
        },
        mounted: function () {
        },
        methods: {
            clickRow: function (data) {
                this.currSelectData = data;
                this.$emit("clickrow", data);
            },
            equals: function (v1, v2) {
                if (v1 == v2) {
                    return true;
                } else {
                    return JSON.stringify(v1) == JSON.stringify(v2);
                }
            }

        },
        computed: {
            columns: function () {
                var cols = this.cols;
                if (!cols) {
                    cols = []
                }
                for (var col of cols) {
                    if (col.width && col.width != '*') {
                        col.style = `width: ${col.width};flex:unset;`
                    }
                }
                return cols;
            },
            datas: function () {
                return this.data;
            }
        },
        watch: {
        },
        template: template,
        style: style
    }
})()